<template>
  <div>
    <h3>客户等级</h3>
    <el-row>&nbsp;</el-row>
    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <!--     放搜索条件   
            :inline="true"  变成行内表单
          -->
          <el-form :inline="true">
            <el-form-item label="注册日期">
              <el-date-picker
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="param.queryDate"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="关键词：">
              <el-input style="width: 180px;" v-model="param.content" placeholder="客户等级名称"></el-input>
            </el-form-item>
            <br />
            <el-form-item>
              <el-button type="primary" @click="queryCustomLevelPage">查询</el-button>
              <el-button @click="clean">清空</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <br />

    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-form>
            <el-form-item style="width: 230px;float:right">
              <el-button type="primary" @click="add()">添加等级</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column prop="customLevelName" label="等级名称"></el-table-column>
            <el-table-column prop="customLevelCondition" label="升级条件"></el-table-column>
            <el-table-column prop="customeCost" label="等级折扣"></el-table-column>
            <el-table-column prop="customLevelCreateTime" label="更新时间"></el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <a @click="updateLevel(scope.row)" style="color:dodgerblue;">编辑</a>&nbsp;|
                <a @click="del(scope.row)" style="color:dodgerblue;">删除</a>&nbsp;
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            :page-sizes="[10, 20, 50]"
            :page-size="10"
            layout="total,sizes,prev, pager, next"
            :total="total"
            @next-click="nextPage"
            @prev-click="precPage"
            @size-change="changePage"
            @current-change="changePageNum"
          ></el-pagination>
        </el-col>
      </el-row>

      <!-- 模态框：添加客户等级 -->
      <el-dialog :visible.sync="dialogForAddCustomLevel">
        <h2>  {{msg}}客户等级</h2>
      
        <el-form style="margin-left: 50px;">
            <el-form-item  label-width="70px">
            <el-input autocomplete="off" v-model="customLevel.id" type="hidden"></el-input>
          </el-form-item>
          <el-form-item label="等级名称" label-width="70px">
            <el-input autocomplete="off" v-model="customLevel.customLevelName"></el-input>
          </el-form-item>
          <el-form-item label="等级折扣（权益）" label-width="70px">
            <el-input autocomplete="off" v-model="customLevel.customeCost"></el-input>
          </el-form-item>
          <el-form-item label="升级条件" label-width="70px">
            <el-input autocomplete="off" v-model="customLevel.customLevelCondition"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="quxiao()">取 消</el-button>
          <el-button type="primary" @click="addCustonLevel()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
    
    <script>
export default {
  data() {
    return {
      custom: {},
      customLevel:{},
      userList: [],
      dialogForAddCustomLevel: false,
      selectionData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      param: {},
      msg:null,
    };
  },
  methods: {
    add(){
        this.msg="添加";
        this.dialogForAddCustomLevel=true;
        this.customLevel={};
    },
    updateLevel(val){
        this.customLevel={};
        this.msg="编辑";
        this.customLevel=val;
        this.dialogForAddCustomLevel=true;
       
    },
    del(val) {
      this.$axios
        .post("api/custom-server/custom/delCustomLevel", val.id)
        .then(res => {
          console.log(res.data);
          if(res.data.code==200){
            this.$message({
            showClose: true,
            message: "删除成功",
            type:"success"
          });
          }
        });
        this.queryCustomLevelPage();
    },
    quxiao(){
        this.customLevel={};
        this.dialogForAddCustomLevel=false;
    },
    queryCustomLevelPage() {
      let params = {};
      params.pageNum = this.pageNum;
      params.pageSize = this.pageSize;
      params.param = this.param;
      this.$axios
        .post("api/custom-server/custom/queryCustomLevelPage", params)
        .then(res => {
          console.log(res.data);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
            this.pages = res.data.data.pages;
          }
        });
    },
    addCustonLevel(){
        this.dialogForAddCustomLevel=false;
        this.$axios.post("api/custom-server/custom/addOrUpdateCustomLevel",this.customLevel).then(res=>{
            if(res.data.data==200){
                this.$message({
                    howClose:true,
                    message:'操作成功',
                    type:"success"
                })
                this.queryCustomLevelPage();
            }
        })
        this.customLevel={};
       
    },
    clean(){
        this.param={};
        this.queryCustomLevelPage();
    },
    handleSelectionChange(val) {
      this.selectionData = val;
      // alert(val);
    },
    nextPage(val) {
      this.pageNum = val;
      this.queryCustom();
    },
    precPage(val) {
      this.pageNum = val;
      this.queryCustom();
    },
    changePage(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.queryCustom();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.queryCustom();
    }
  },
  created() {
    this.queryCustomLevelPage();
  }
};
</script>
    
    <style scoped>
</style>